<template>
  <div class="xsd-drop-container">
    <div class="xsd-it">
      <template v-if="selected">
        {{value.value}}
      </template>
      <slot
        name="display"
        v-else
      >请选择</slot>
      <div
        ref="arrow"
        class="xsd-arrow-bottom"
        @click="chooseClick()"
      ></div>
    </div>
    <transition name="xsd-drop">
      <div
        class="xsd-drop-items"
        v-show="showFlag"
      >
        <div
          ref="item"
          class="xsd-drop-item"
          v-for="item of items"
          :key="item.key"
          @click="select(item)"
        >
          {{item.value}}
        </div>
      </div>
    </transition>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "xsd-drop-items",
  data() {
    return {
      selected: false,
      showFlag: false,
    }
  },
  watch: {
    showFlag: function (newValue) {
      if (newValue) {
        this.$refs.arrow.classList.add('xsd-rotate');
      } else {
        this.$refs.arrow.classList.remove('xsd-rotate');
      }
    }
  },
  methods: {
    chooseClick() {
      this.showFlag = !this.showFlag;
      if (this.value.key === undefined) {
        return
      }
      this.$refs.item.forEach(item => {
        item.style.backgroundColor = '#eee'
      })

      const index = this.items.findIndex(item => {
        return item.key === this.value.key;
      })
      this.$refs.item[index].style.backgroundColor = "rgb(161, 208, 255)";
    },
    select(item) {
      this.selected = true;
      this.showFlag = false;
      this.$emit('choose', item);
      this.$emit('input', { ...item });
    }
  },
  props: {
    items: {
      type: Array,
      required: true
    },
    value: Object
  },
}
</script>

<style scoped>
.xsd-drop-container {
  width: 120px;
  position: relative;
}

.xsd-it,
.xsd-drop-item {
  line-height: 24px;
}

.xsd-it {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  background-color: #fff;
  text-align: center;
  border: 1px solid #409eff;
  padding-right: 21px;
  padding-left: 8px;
  cursor: default;
  user-select: none;
}

.xsd-arrow-bottom {
  position: absolute;
  width: 0;
  height: 0;
  border-width: 8px 8px 0 8px;
  border-style: solid;
  border-color: #409eff transparent transparent transparent;
  right: 5px;
  top: 50%;
  margin-top: -4px;
  transition: 0.3s;
}

.xsd-arrow-bottom:hover {
  cursor: pointer;
}

.xsd-rotate {
  transform: rotate(180deg);
}

.xsd-drop-items {
  background-color: red;
  overflow: hidden;
  z-index: 10;
  position: absolute;
  width: 100%;
}

.xsd-drop-item {
  text-align: center;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  cursor: pointer;
  user-select: none;
}

.xsd-drop-item:hover {
  background-color: rgb(199, 227, 255) !important;
}

@keyframes dropdown {
  0% {
    opacity: 0;
    transform-origin: 0 0;
    transform: scaleY(0);
  }
  100% {
    transform-origin: 0 0;
    transform: scaleY(1);
    opacity: 1;
  }
}

.xsd-drop-enter-active,
.xsd-drop-leave-active {
  animation-name: dropdown;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

.xsd-drop-leave-active {
  animation-direction: reverse;
}
</style>
